import type {ReactNode} from "react"
import {motion} from "framer-motion"

interface PhoneMockupProps {
    children: ReactNode
    className?: string
}

export function PhoneMockup({children, className = ""}: PhoneMockupProps) {
    return (
        <motion.div
            className={`relative mx-auto ${className}`}
            initial={{opacity: 0, y: 20}}
            animate={{opacity: 1, y: 0}}
            transition={{duration: 0.5}}
            whileHover={{scale: 1.02}}
        >
            <div
                className="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl">
                <div
                    className="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
                <div className="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
                <div className="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
                <div className="h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
                <div className="rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white">
                    <div className="w-full h-full overflow-hidden">{children}</div>
                </div>
            </div>
        </motion.div>
    )
}
